<template>
    <div style="display:inline-block;vertical-align: middle;font-size:0;position: relative;">
        <div style="display:inline-block;width:100%;"  :style="{'padding-right': buttonWidth + 'px'}">
            <el-input v-model="currentValue" :placeholder="placeholder"
                      ref="input"
                      :maxlength="maxlength"
                      :minlength="minlength"
                      :value="value"
                      :rows="rows"
                      :disabled="disabled"
                      :size = "size"
                      class="commonInput commonButtonInput"
                      v-bind="$attrs"
                      v-on="$listeners"
                      :fit="true"
                      :type="type">
            </el-input>
        </div>
        <el-button ref="button" class="commonButton commonInputButton" :style="{'right':0 + 'px'}" @click="handleClick">
            <i v-show="btnText==''" class="fa fa-search"></i>
            {{btnText}}
        </el-button>
    </div>
</template>
<script>
    export default {
        name: 'buttonInput',
        currentValue: String,
        oldValue: String,

        data() {
            return {
                currentValue: this.value,
                buttonWidth:40
            };
        },

        watch: {
            value(val, oldValue) {
                this.setCurrentValue(val);
            },
        },

        created: function () {
            const me = this;
            setTimeout(function(){
                console.log(me.$refs.button.$el.clientWidth)
                me.buttonWidth = me.$refs.button.$el.clientWidth + 2;
            },100);
        },

        methods: {
            setCurrentValue(val) {
                this.currentValue = val;
            },

            handleClick(evt) {
                this.$emit('click', evt);
            }
        },

        props: {
            placeholder: {
                type: String,
                default: ''
            },
            value: {
                type: [String, Number],
            },
            maxlength: {
                type: [Number],
                default: 1000
            },
            minlength: {
                type: [Number],
                default: 0
            },
            type: {
                type: String,
                default: 'text'
            },
            readOnly: {
                type: Boolean,
                default: false
            },
            rows: Number,
            size: {
                type: String,
                default: 'small'
            },
            disabled: {
                type: Boolean,
                default: false
            },
            btnText: {
                type: String,
                default: ''
            }
        },
    }
</script>
